<template>
  <view class="bg-[#f5f5f5] min-h-screen w-full box-border overflow-x-hidden">
    <!-- Header -->
    <view class="bg-gradient-to-r from-[#165DFF] to-[#6f47ff] text-white p-[40rpx] text-center relative overflow-hidden rounded-b-2xl">
      <view class="absolute w-[300rpx] h-[300rpx] bg-white bg-opacity-10 rounded-full -top-[100rpx] -right-[80rpx]" />
      <text class="text-[44rpx] font-bold mb-[15rpx] block relative z-2">服务商会员充值中心</text>
      <text class="text-[28rpx] opacity-90 relative z-2">选择适合您的会员类型，享受更多平台特权</text>
    </view>

    <!-- 当前会员状态 -->
    <view class="flex justify-center px-[32rpx] -mt-[36rpx] relative z-10 mb-[40rpx]">
      <view class="bg-white rounded-2xl p-[32rpx] shadow-md w-full max-w-[680rpx] text-center">
        <view class="w-[80rpx] h-[80rpx] bg-gradient-to-r from-[#165DFF] to-[#6f47ff] rounded-full flex items-center justify-center text-white text-[36rpx] mx-auto mb-[25rpx]">
          <IconFont name="crown" />
        </view>
        <text class="text-[34rpx] font-semibold mb-[15rpx] text-[#165DFF] block">当前会员状态</text>
        <text class="text-[30rpx] font-bold mb-[25rpx] block">普通服务商</text>
        <text class="text-[26rpx] text-[#666] leading-[1.8] mb-[25rpx] block">
          您当前是<text class="text-[#FF4D4F] font-bold">普通服务商</text>，任务完成后平台将扣除<text class="text-[#FF4D4F] font-bold">15%</text>信息服务费
        </text>
        <view class="bg-gradient-to-r from-[#FFB300] to-[#FF4D4F] text-white px-[25rpx] py-[10rpx] rounded-2xl text-[28rpx] font-semibold inline-block">
          升级会员可节省服务费
        </view>
      </view>
    </view>

    <view class="px-[24rpx] pb-[40rpx] w-full max-w-[750rpx] box-border mx-auto">
      <!-- 选择会员类型 -->
      <view class="text-center mb-[35rpx]">
        <text class="text-[34rpx] font-semibold text-[#165DFF] relative">选择会员类型</text>
        <view class="w-[120rpx] h-[5rpx] bg-gradient-to-r from-[#165DFF] to-[#6f47ff] rounded-[5rpx] mx-auto mt-[20rpx]" />
      </view>
      <view class="flex flex-col md:flex-row gap-[32rpx] mb-[50rpx]">
        <!-- 年费会员 -->
        <view class="rounded-2xl p-[32rpx] text-center shadow-md bg-white flex-1 min-w-0">
          <IconFont name="calendar-alt" class="text-[60rpx] text-[#165DFF] mb-[25rpx]" />
          <text class="text-[32rpx] font-bold mb-[15rpx] text-[#165DFF] block">年费会员</text>
          <text class="text-[40rpx] font-bold mb-[25rpx] text-[#FF4D4F] block">
            ¥998 <text class="text-[24rpx] font-normal text-[#666]">/年</text>
          </text>
          <view class="text-left text-[26rpx] mb-[35rpx]">
            <view v-for="(item, idx) in yearBenefits" :key="idx" class="py-[12rpx] pl-[40rpx] relative border-b border-dashed border-[#eee] last:border-b-0 flex items-center">
              <view class="absolute left-0 top-[50%] -translate-y-1/2 w-[30rpx] h-[30rpx] bg-[#e8f0fe] rounded-full flex items-center justify-center">
                <text class="text-[#165DFF] font-bold text-[22rpx]">✓</text>
              </view>
              <text class="ml-[40rpx]">{{ item }}</text>
            </view>
          </view>
          <view class="bg-[#f5f7fa] rounded-xl p-[20rpx] mb-[30rpx]">
            <view class="text-[26rpx] font-semibold mb-[10rpx] text-[#165DFF] flex items-center justify-center">
              <IconFont name="percentage" class="mr-[10rpx]" />
              <text>扣费规则</text>
            </view>
            <view class="text-[24rpx] text-[#666]">
              <view v-for="(item, idx) in yearRules" :key="idx" class="mb-[8rpx] pl-[25rpx] relative flex items-center">
                <text class="text-[#165DFF] font-bold absolute left-0">•</text>
                <text class="ml-[24rpx]">{{ item }}</text>
              </view>
            </view>
          </view>
          <nut-button type="primary" size="large" class="w-full text-[30rpx] font-semibold bg-gradient-to-r from-[#165DFF] to-[#6f47ff] rounded-2xl mt-[8rpx]" @click="handlePurchase('年费会员')">
            购买年费会员
          </nut-button>
        </view>
        <!-- 次卡会员 -->
        <view class="rounded-2xl p-[32rpx] text-center shadow-md bg-white flex-1 min-w-0 border-2 border-[#165DFF] relative -translate-y-[10rpx]">
          <view class="absolute -top-[15rpx] left-1/2 -translate-x-1/2 bg-gradient-to-r from-[#FFB300] to-[#FF4D4F] text-white px-[32rpx] py-[8rpx] rounded-2xl text-[22rpx] font-semibold">
            超值
          </view>
          <IconFont name="ticket-alt" class="text-[60rpx] text-[#165DFF] mb-[25rpx]" />
          <text class="text-[32rpx] font-bold mb-[15rpx] text-[#165DFF] block">次卡会员</text>
          <text class="text-[40rpx] font-bold mb-[25rpx] text-[#FF4D4F] block">
            ¥299 <text class="text-[24rpx] font-normal text-[#666]">/10次</text>
          </text>
          <view class="text-left text-[26rpx] mb-[35rpx]">
            <view v-for="(item, idx) in cardBenefits" :key="idx" class="py-[12rpx] pl-[40rpx] relative border-b border-dashed border-[#eee] last:border-b-0 flex items-center">
              <view class="absolute left-0 top-[50%] -translate-y-1/2 w-[30rpx] h-[30rpx] bg-[#165DFF] rounded-full flex items-center justify-center">
                <text class="text-white font-bold text-[22rpx]">✓</text>
              </view>
              <text class="ml-[40rpx]">{{ item }}</text>
            </view>
          </view>
          <view class="bg-[#f5f7fa] rounded-xl p-[20rpx] mb-[30rpx]">
            <view class="text-[26rpx] font-semibold mb-[10rpx] text-[#165DFF] flex items-center justify-center">
              <IconFont name="money-bill-wave" class="mr-[10rpx]" />
              <text>扣费规则</text>
            </view>
            <view class="text-[24rpx] text-[#666]">
              <view v-for="(item, idx) in cardRules" :key="idx" class="mb-[8rpx] pl-[25rpx] relative flex items-center">
                <text class="text-[#165DFF] font-bold absolute left-0">•</text>
                <text class="ml-[24rpx]">{{ item }}</text>
              </view>
            </view>
          </view>
          <nut-button type="primary" size="large" class="w-full text-[30rpx] font-semibold bg-gradient-to-r from-[#165DFF] to-[#6f47ff] rounded-2xl mt-[8rpx]" @click="handlePurchase('次卡会员')">
            购买10次卡
          </nut-button>
        </view>
      </view>

      <!-- 费用对比表格 -->
      <view class="bg-white rounded-2xl p-[32rpx] shadow-md mb-[40rpx] overflow-x-auto">
        <text class="text-[32rpx] font-semibold text-[#165DFF] mb-[24rpx] text-center block">会员费用对比</text>
        <view class="min-w-full">
          <view class="flex bg-[#f5f7fa] rounded-t-xl">
            <view class="flex-1 p-[20rpx] text-[26rpx] font-semibold text-[#165DFF] text-center">扣费项目</view>
            <view class="flex-1 p-[20rpx] text-[26rpx] font-semibold text-[#165DFF] text-center">普通服务商</view>
            <view class="flex-1 p-[20rpx] text-[26rpx] font-semibold text-[#165DFF] text-center">年费会员</view>
            <view class="flex-1 p-[20rpx] text-[26rpx] font-semibold text-[#165DFF] text-center">次卡会员</view>
          </view>
          <view v-for="(row, idx) in tableRows" :key="idx" class="flex border-b border-[#eee] last:border-0">
            <view class="flex-1 p-[20rpx] text-[24rpx] text-center">{{ row[0] }}</view>
            <view class="flex-1 p-[20rpx] text-[24rpx] text-center" :class="row[1].class">{{ row[1].text }}</view>
            <view class="flex-1 p-[20rpx] text-[24rpx] text-center" :class="row[2].class">{{ row[2].text }}</view>
            <view class="flex-1 p-[20rpx] text-[24rpx] text-center" :class="row[3].class">{{ row[3].text }}</view>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="bg-white rounded-2xl p-[32rpx] shadow-md mb-[40rpx]">
        <text class="text-[32rpx] font-semibold text-[#165DFF] mb-[24rpx] text-center block">常见问题解答</text>
        <view class="space-y-[24rpx]">
          <view v-for="(faq, idx) in faqs" :key="idx" class="mb-[24rpx] pb-[24rpx] border-b border-[#eee] last:border-0">
            <view class="text-[28rpx] font-semibold mb-[12rpx] text-[#333] flex items-center">
              <IconFont name="question-circle" class="text-[#165DFF] mr-[12rpx]" />
              <text>{{ faq.q }}</text>
            </view>
            <text class="text-[24rpx] text-[#666] leading-[1.8] pl-[32rpx]">{{ faq.a }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Footer -->
    <view class="text-center p-[32rpx] text-[#165DFF] text-[22rpx]">
      <text class="block">© 2023 平台服务商中心 | 专业服务，高效合作</text>
      <view class="flex justify-center gap-[30rpx] mt-[16rpx] flex-wrap">
        <text class="text-[#165DFF]">会员协议</text>
        <text class="text-[#165DFF]">扣费规则</text>
        <text class="text-[#165DFF]">客服支持</text>
        <text class="text-[#165DFF]">隐私政策</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'

const yearBenefits = [
  '一年内无限次发布任务',
  '任务完成扣点仅5%',
  '提现免手续费',
  '优先推荐展示',
  '专属客服支持'
]
const yearRules = [
  '任务结束后先扣5%服务费',
  '剩余95%结算到会员中心',
  '提现时不再扣除任何手续费'
]
const cardBenefits = [
  '10次任务发布权限',
  '按次收费，不限任务金额',
  '任务完成无额外扣点',
  '提现免手续费',
  '适合低频任务发布'
]
const cardRules = [
  '每次任务消耗1次卡',
  '任务金额100%结算',
  '无任何额外百分比扣点',
  '提现时不再扣除手续费'
]
const tableRows = [
  [
    '会员费用',
    { text: '¥0', class: '' },
    { text: '¥998/年', class: 'text-[#FF4D4F] font-bold' },
    { text: '¥299/10次', class: 'text-[#FF4D4F] font-bold' }
  ],
  [
    '任务服务费',
    { text: '15%', class: 'text-[#FF4D4F] font-bold' },
    { text: '5%', class: 'text-[#16C784] font-bold' },
    { text: '0%', class: 'text-[#16C784] font-bold' }
  ],
  [
    '提现手续费',
    { text: '1%', class: '' },
    { text: '0%', class: 'text-[#16C784] font-bold' },
    { text: '0%', class: 'text-[#16C784] font-bold' }
  ],
  [
    '适合场景',
    { text: '偶尔使用', class: '' },
    { text: '高频使用', class: '' },
    { text: '低频使用', class: '' }
  ],
  [
    '任务金额¥10,000结算',
    { text: '¥8,500', class: '' },
    { text: '¥9,500', class: 'text-[#16C784] font-bold' },
    { text: '¥10,000', class: 'text-[#16C784] font-bold' }
  ]
]
const faqs = [
  {
    q: '年费会员和次卡会员有什么区别？',
    a: '年费会员按年付费，适合高频发布任务的用户，每笔任务仅扣除5%服务费；次卡会员按次数付费（10次卡），适合低频用户，每次任务消耗一次卡，无额外百分比扣点。'
  },
  {
    q: '任务完成后资金如何结算？',
    a: '年费会员：任务结束后平台扣除5%服务费，剩余95%结算到您的账户；次卡会员：任务金额100%结算到您的账户（每次任务消耗一次卡）。'
  },
  {
    q: '提现是否有手续费？',
    a: '年费会员和次卡会员提现均免手续费，普通服务商提现需支付1%手续费。'
  },
  {
    q: '次卡会员的有效期是多久？',
    a: '次卡会员购买后永久有效，无使用时间限制，用完为止。'
  }
]
function handlePurchase(type: string) {
  // 购买逻辑
}
</script>